<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>钟表-CSS3</title>
<style id="css">
	#box{ width:200px;height:200px;border:1px solid black;position:relative;border-radius:50%;margin:100px auto; }
	#list{ list-style:none;position:relative;height:100%;margin:0;padding:0; }
	#list li{ width:1px;height:6px;background:#000;position:absolute;left:99px;top:0;transform-origin:center 100px;-moz-transform-origin:center 100px;-webkit-transform-origin:center 100px;-o-transform-origin:center 100px; }
	#list li:nth-child(5n+1){ width:2px;height:10px; }
	#ico,#hour,#min,#sec{ position:absolute;background:#000; }
	#ico{ width:10px;height:10px;border-radius:50%;left:95px;top:95px; }
	#hour{ width:4px;height:50px;left:98px;top:50px;transform-origin:bottom;-moz-transform-origin:bottom;-webkit-transform-origin:bottom;-o-transform-origin:bottom; }
	#min{ width:2px;height:70px;left:99px;top:30px;background:#300;transform-origin:bottom;-moz-transform-origin:bottom;-webkit-transform-origin:bottom;-o-transform-origin:bottom; }
	#sec{ width:2px;height:90px;left:99px;top:10px;background:red;transform-origin:bottom;-moz-transform-origin:bottom;-webkit-transform-origin:bottom;-o-transform-origin:bottom; }
</style>
<script>
	window.onload=function(){
		
		var list=document.getElementById("list");
		var hour=document.getElementById("hour");
		var mins=document.getElementById("min");
		var sec=document.getElementById("sec");
		var css=document.getElementById("css");
		
		var lis="";
		 
		for( var i=0;i<60;i++ ){
			
			lis+=" <li></li> ";
			
			css.innerHTML+="#list li:nth-of-type("+(i+1)+"){ transform:rotate( "+i*6+"deg );-moz-transform:rotate( "+i*6+"deg );-webkit-transform:rotate( "+i*6+"deg );-o-transform:rotate( "+i*6+"deg ); }";
			
		}
		
		list.innerHTML=lis;
		toTime();
		setInterval( toTime,1000 );
		
		function toTime(){
			
			var date=new Date();
			var s=date.getSeconds();
			var m=date.getMinutes()+s/60;
			var h=date.getHours()+m/60;
			
			hour.style.WebkitTransform=" rotate( "+ h*30 +"deg ) ";
			mins.style.WebkitTransform=" rotate( "+ m*6 +"deg ) ";
			sec.style.WebkitTransform=" rotate( "+ s*6 +"deg ) ";
			
		}
		
		
	}
</script>
</head>
<body>
	<div id="box">
    	<ul id="list"></ul>
    	<div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
        <div id="ico"></div>
    </div>
</body>
</html>
